<template>
	<view class="box">
		<view class="row">
			<text>手机号</text>
			<input v-model="tel" type="text" placeholder="输入手机号" maxlength="12"/>
		</view>
		<view class="row">
			<view class="send">
				<text>验证码</text>
				<text @click="_getSmsCode">{{djsStatus}}</text>
			</view>
			<input v-model="code" type="text" placeholder="- - - -" maxlength="4" />
		</view>
		<view class="row">
			<text style="font-size: 23rpx;">收不到验证码？试试 <text style="color:#00BB00;font-size: 23rpx;"> 语音验证</text></text>
			<!--   -->
			<button  
			type="primary" 
			style="width: 90%;border-radius: 80rpx;margin-top: 50rpx;"
			@click="_doLogin"
			>登录</button>
		</view>
		<view class="row">
			<!-- <text style="color: #006699;text-align: center;" >通过微信授权登录</text> -->
		</view>
	</view>
</template>

<script>

import Http from '@/utils/http.js'	
// import { apiurl } from '@/utils/config.js'	

	export default {
		data() {
			return {
				djsStatus:'获取手机验证码',
				tel:'',//手机号
				timer:null,
				isSend:false,//是否发送了手机验证请求
				code:'',//用户输入的手机验证码
			}
			
		},
		methods: {
			
			//实现登录
			/*
				只需要传手机号就可以
					验证码是否通过，在前台验证，  实际开发中：应该手机号和验证码一并发送服务器，是在端验证的。
			*/
			async _doLogin(){
				let code = uni.getStorageSync('code')
				//console.log(code,'缓存中的')
				//console.log( this.code )
				if( this.code != code ){
					uni.showToast({
						title:'手机验证码不正确',
						icon:'none'
					})
					return
				}
				
				//发送登录请求
				let regExp = /^1[356789]\d{9}$/
				if( !regExp.test( this.tel ) ){
					console.log('不是手机号')
					return
				}
				let result = await Http({
					url:'/api/wxlogin',
					data:{
						phone:this.tel
					}
				})
				console.log( result,'登录返回的结果' )
				let { uid,token,phone } = result.data.list
				if( token ){
					uni.showToast({
						title:"登录成功",
						duration:3000
					})
				}
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},3000)
				uni.setStorageSync('uid',uid)
				uni.setStorageSync('token',token)
				uni.setStorageSync('phone',phone)
			},
			
			//获取手机验证码
			async _getSmsCode(){
				//console.log( this.tel )
				
				if( this.isSend ){
					return
				}
				
				this.isSend = true
				let regExp = /^1[356789]\d{9}$/
				if( !regExp.test( this.tel ) ){
					console.log('不是手机号')
					return
				}
				//console.log('ok')
				let result = await Http({
					url:'/api/sms',
					data:{
						phone:this.tel
					}
				})
				
				var num = 60
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					num--
					this.djsStatus = num + '秒以后，重新获取'
					if( num <=0 ){
						clearInterval( this.timer )
						this.isSend = false
						this.djsStatus = '重新获取手机验证码'
					}
				},1000)
				
				//return
				//console.log( result )
				let code = result.data.list.code //存储在缓存中
				uni.setStorageSync('code',code)
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	.box{
		position: relative;
	}

	.row{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 40rpx;
	}
	.send{
		display: flex;
		justify-content: space-between;
	}
	.send text:nth-of-type(2){
		color: #00BB00;
	}
	text{
		font-size: 27rpx;
		margin-bottom: 10rpx;
	}
	input{
		border-bottom: 1rpx solid gray;
		height: 65rpx;
	}
	
</style>